<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
    .con{
        width: 600px;
        margin: 0 auto;
    }
    span{
        float: left;
        line-height: 30px;
    }
    .one{
        float: right;
    }
    #result{
        font-size: 30px;
        
    }

</style>
</head>

<body>
    <div class="con">
        <div class="one"><span>你已输入</span><span id="result">0</span> <span>字</span></div>
        <textarea name="content" id="content" cols="80" rows="5" style="font-size: 20px; width: 598px; height: 140px;"></textarea><br />
        <input type="button" name="btn" value="提交" id="btn" />
    </div>

</body>
<script src="jQuery.js"></script>
<script>
$(document).ready(function(){
        var hanzi = 0;
        var yinwen = 0;
        var shuzi = 0;
     $("#content").keyup(function(){
               var content = $("#content").val();
              var re = /[\u4E00-\u9FA5]/g;
              var r2 = /[A-Za-z]/g;
              var r3 = /[0-9]/g;
               if (re.test(content)){
                //    console.log('haha');
                   hanzi = content.match(re).length;
               }else{
                   hanzi=0;
               }
               if(r2.test(content)){
                  yinwen = content.match(r2).length/2;
               }else{
                   yinwen=0;
               }
               if(r3.test(content)){
                  shuzi = content.match(r3).length/2;
               }else{
                   shuzi=0;
               }  
               var content_lenqian = hanzi + yinwen + shuzi;
               var content_len = Math.floor(content_lenqian);
               // 当用户输入的字数大于制定的数时，让提交按钮失效
               // 小于制定的字数，就可以提交
               if(content_len >=0 && content_len <=100){
                     $("#result").html(content_len);
                     $("#btn").attr("disabled",false);
                     $("#result").css('color','black');
                     // 可以继续执行其他操作
               }else if(content_len >=100){
                     $("#result").html(content_len);
                     $("#btn").attr("disabled",true);
                     $("#result").css('color','red');
                     return false;
               }
             
       });
     });
 
</script>
</html>